<li
  #dragElement
  role="treeitem"
  [style.display]="displayStyle"
  [ngClass]="nzNodeClass"
  [class.ant-tree-treenode-switcher-open]="isSwitcherOpen"
  [class.ant-tree-treenode-switcher-close]="isSwitcherClose"
  [class.ant-tree-treenode-checkbox-checked]="nzTreeNode.isChecked"
  [class.ant-tree-treenode-checkbox-indeterminate]="nzTreeNode.isHalfChecked"
  [class.ant-tree-treenode-selected]="nzTreeNode.isSelected"
  [class.ant-tree-treenode-loading]="nzTreeNode.isLoading">
  <ng-container *ngIf="nzShowExpand">
    <span
      [ngClass]="nzNodeSwitcherClass"
      [class.ant-tree-switcher_open]="isSwitcherOpen"
      [class.ant-tree-switcher_close]="isSwitcherClose"
      (click)="_clickExpand($event)">
      <ng-container *ngIf="isShowSwitchIcon">
        <i *ngIf="!nzTreeNode.isLoading" nz-icon type="caret-down" class="ant-tree-switcher-icon"></i>
        <i *ngIf="nzTreeNode.isLoading" nz-icon type="loading" [spin]="true" class="ant-tree-switcher-loading-icon"></i>
      </ng-container>
      <ng-container *ngIf="nzShowLine">
        <i *ngIf="isShowLineIcon" nz-icon [type]="isSwitcherOpen ? 'minus-square' : 'plus-square'" class="ant-tree-switcher-line-icon"></i>
        <i *ngIf="!isShowLineIcon" nz-icon type="file" class="ant-tree-switcher-line-icon"></i>
      </ng-container>
    </span>
  </ng-container>
  <ng-container *ngIf="nzCheckable">
    <span
      class="ant-tree-checkbox"
      [class.ant-tree-checkbox-checked]="nzTreeNode.isChecked"
      [class.ant-tree-checkbox-indeterminate]="nzTreeNode.isHalfChecked"
      [class.ant-tree-checkbox-disabled]="(nzTreeNode.isDisabled || nzTreeNode.isDisableCheckbox)"
      (click)="_clickCheckBox($event)">
      <span class="ant-tree-checkbox-inner"></span>
    </span>
  </ng-container>
  <ng-container *ngIf="!nzTreeTemplate">
    <span
      title="{{nzTreeNode.title}}"
      [attr.draggable]="canDraggable"
      [attr.aria-grabbed]="canDraggable"
      [ngClass]="nzNodeContentClass"
      [class.ant-tree-node-content-wrapper-open]="isSwitcherOpen"
      [class.ant-tree-node-content-wrapper-close]="isSwitcherClose"
      [class.ant-tree-node-selected]="nzTreeNode.isSelected"
      [class.draggable]="canDraggable">
      <span
        *ngIf="nzTreeNode.origin.icon"
        [class.ant-tree-icon__open]="isSwitcherOpen"
        [class.ant-tree-icon__close]="isSwitcherClose"
        [class.ant-tree-icon_loading]="nzTreeNode.isLoading"
        [ngClass]="nzNodeContentLoadingClass">
        <span
          [ngClass]="nzNodeContentIconClass">
          <i nz-icon *ngIf="nzIcon" [type]="!oldAPIIcon && nzIcon" [ngClass]="oldAPIIcon && nzIcon"></i>
        </span>
      </span>
      <span class="ant-tree-title">
        <ng-container *ngIf="nzTreeNode.isMatched">
          <span>
            {{highlightKeys[0]}}<span class="font-highlight">{{nzSearchValue}}</span>{{highlightKeys[1]}}
          </span>
        </ng-container>
        <ng-container *ngIf="!nzTreeNode.isMatched">
          {{nzTreeNode.title}}
        </ng-container>
      </span>
    </span>
  </ng-container>
  <ng-template
    [ngTemplateOutlet]="nzTreeTemplate"
    [ngTemplateOutletContext]="{ $implicit: nzTreeNode }">
  </ng-template>

  <ul
    role="group"
    [attr.data-expanded]="nzTreeNode.isExpanded"
    [ngClass]="nzNodeChildrenClass"
    [@nodeState]="nzTreeNode.isExpanded ? 'active' : 'inactive'">
    <nz-tree-node
      *ngFor="let node of nzTreeNode.getChildren()"
      [nzTreeNode]="node"
      [nzShowLine]="nzShowLine"
      [nzDraggable]="nzDraggable"
      [nzCheckable]="nzCheckable"
      [nzShowExpand]="nzShowExpand"
      [nzAsyncData]="nzAsyncData"
      [nzMultiple]="nzMultiple"
      [nzExpandAll]="nzExpandAll"
      [nzDefaultExpandAll]="nzDefaultExpandAll"
      [nzSearchValue]="nzSearchValue"
      [nzHideUnMatched]="nzHideUnMatched"
      [nzBeforeDrop]="nzBeforeDrop"
      [nzCheckStrictly]="nzCheckStrictly"
      [nzTreeTemplate]="nzTreeTemplate"
      (clickNode)="clickNode.emit($event)"
      (dblClick)="dblClick.emit($event)"
      (contextMenu)="contextMenu.emit($event)"
      (clickExpand)="clickExpand.emit($event)"
      (clickCheckBox)="clickCheckBox.emit($event)"
      (nzDragStart)="nzDragStart.emit($event)"
      (nzDragEnter)="nzDragEnter.emit($event)"
      (nzDragOver)="nzDragOver.emit($event)"
      (nzDragLeave)="nzDragLeave.emit($event)"
      (nzDrop)="nzDrop.emit($event)"
      (nzDragEnd)="nzDragEnd.emit($event)">
    </nz-tree-node>
  </ul>
</li>